<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- basic styles -->
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../assets/css/ace.min.css" />
        <link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
    </head>
    <body>
        <div class="main-container">
            <div class="col-xs-12">
                <h3 class="header smaller lighter blue">DPI设备管理</h3>
                <div style="float: right;margin-top: -44px;">
                    <button class="btn btn-success btn-xs" onclick='addDevice()'>添加设备</button>
                    <!--<button class="btn btn-danger btn-xs">删除设备</button>-->
                </div>
                <div class="table-header">
                    设备列表
                </div>
                <div class="table-responsive">
                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>设备名称</th>
                                <th>设备地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/bootstrap.min.js"></script>
        <!-- page specific plugin scripts -->
        <script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="../assets/js/jquery.dataTables.min.js"></script>
        <script src="../assets/js/jquery.dataTables.bootstrap.js"></script>
        <script src="../assets/js/jquery.slimscroll.min.js"></script>
        <script src="../assets/js/jquery.validate.js"></script>
        <script src="../assets/js/jquery.validate-util.js"></script>
        <script src="../assets/js/fuelux/fuelux.wizard.min.js"></script>
        <script src="../assets/js/Base64.js"></script>
        <script src="../assets/js/logic/dpi-device.js"></script>
        <script src="../assets/js/ace-elements.min.js"></script>
        
        <script type="text/javascript">
                        var base64 = new Base64();
                        $(function() {
                            var souData = getDeviceAll();
                            var aaData = [];
                            for (var i in souData) {
                                var id = souData[i].id;
                                var name = souData[i].name;
                                var ip = souData[i].ip;
                                var option = '';
                                option += "<label>";
                                option += "   <input type='checkbox' class='ace' />";
                                option += "   <span class='lbl'></span>";
                                option += "</label>";
                                var oper = '';
                                oper += "<a class='blue' href='javascript:void(0)' title='查看设备详细信息' onclick='searchDevice(" + JSON.stringify(souData[i]) + ")'>";
                                oper += "    <i class='icon-search bigger-130'></i>";
                                oper += "</a>";
                                oper += "<a class='green' href='javascript:void(0)' title='编辑设备信息' onclick='editDevice(" + id + ")'>";
                                oper += "    <i class='icon-pencil bigger-130'></i>";
                                oper += "</a>";
                                oper += "<a class='red' href='javascript:void(0)' title='删除设备' onclick='delDevice(" + id + ")'>";
                                oper += "    <i class='icon-trash bigger-130'></i>";
                                oper += "</a>";
                                if (souData[i].isEnabled == "0") {
                                    oper += "<a class='green' href='javascript:void(0)' title='连接设备' onclick='stratDevice(" + id + ")'>";
                                    oper += "    <i class='icon-play bigger-130'></i>";
                                    oper += "</a>";
                                } else {
                                    oper += "<a class='red' href='javascript:void(0)' title='断开连接' onclick='enableDevice(" + id + ")'>";
                                    oper += "    <i class='icon-stop bigger-130'></i>";
                                    oper += "</a>";
                                }
                                oper += "<a class='green' href='javascript:void(0)' title='设备通用信息下发' onclick='sendCommon(" + id + ")'>";
                                oper += "    <i class='icon-plus bigger-130'></i>";
                                oper += "</a>";
                                aaData.push([name, ip, oper]);
                            }
                            var oTable1 = $('#sample-table-2').dataTable({
                                "aoColumns": [
                                    {"bSortable": true},
                                    {"bSortable": false},
                                    {"bSortable": false}
                                ],
                                "aaData": aaData
                            });
                        })
        </script>
    </body>
</html>